<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
<meta charset="UTF-8" />
<title>扫码统计页</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="http://layui.hcwl520.com.cn/layui-v2.4.5/css/layui.css?v=201811010202" rel="stylesheet"></link>
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>扫码统计页</legend>
	</fieldset>
	<div class="layui-container">  
 	 <div class="layui-row">
 	 	<input type="hidden" th:value="${qId}" id="qId">
	   <div class="layui-col-md12">
	   			<fieldset class="layui-elem-field layui-field-title" >
  					<legend>按城市</legend>
				</fieldset>
		   	<table class="layui-hide" id="qrCodeTableCity"  lay-filter="qrCodeCity"></table>
			<script type="text/html" id="indexTpl">
   			 {{d.LAY_TABLE_INDEX+1}}
			</script>
	   </div>
	   <div class="layui-col-md12">
	   			<fieldset class="layui-elem-field layui-field-title" >
  					<legend>按日期</legend>
				</fieldset>
		   	<table class="layui-hide" id="qrCodeTableDate"  lay-filter="qrCodeDate"></table>
			<script type="text/html" id="indexTpl">
   			 {{d.LAY_TABLE_INDEX+1}}
			</script>
	   </div>
  </div>
  
</body>
<script type="text/javascript" src="http://layui.hcwl520.com.cn/jquery/jquery-3.3.1.min.js?v=201804251754"></script>
<script type="text/javascript" src="http://layui.hcwl520.com.cn/layui-v2.4.5/layui.all.js?v=201811010202"></script>
<script>
$(function() { 
	 $.ajax({
         type: "get",
         url:  'countByArea?rId='+$("#qId").val(),
         success: function(data){
      	  	initTableCity(data);
         }
     });
	 $.ajax({
         type: "get",
         url:  'countByDate?rId='+$("#qId").val(),
         success: function(data){
      	  	console.log(data);
      	  	initTableDate(data);
         }
     });
});
function initTableCity(data){
	layui.use(['layer', 'table',], function(){
		  table = layui.table //表格
		  table.render({
		    elem: '#qrCodeTableCity'
		    ,title: '扫码量列表'
		    ,cellMinWidth: 30
		    ,cols: [[ //表头
		      {type: 'checkbox', fixed: 'left'}
		      ,{field:'id', title:'序号',fixed: 'left',width:80, unresize: true, sort: true, templet: '#indexTpl' }
		      ,{field: 'name', title: '地区', fixed: 'left'}
		      ,{field: 'value', title: '访问数' }
		    ]]
		 	 ,even: true //隔行背景
		 	 ,data:data
		  });
	  });	
}

function initTableDate(data){
	layui.use(['layer', 'table',], function(){
		  table = layui.table //表格
		  table.render({
		    elem: '#qrCodeTableDate'
		    ,title: '扫码量列表'
		    ,cellMinWidth: 30
		    ,cols: [[ //表头
		      {type: 'checkbox', fixed: 'left'}
		      ,{field:'id', title:'序号',fixed: 'left',width:80, unresize: true, sort: true, templet: '#indexTpl' }
		      ,{field: 'name', title: '日期', fixed: 'left'}
		      ,{field: 'value', title: '访问数' }
		    ]]
		 	 ,even: true //隔行背景
		 	 ,data:data
		  });
	  });	
}

</script>
</html>


 



